↓메인 콘텐츠로 이동하기
  1. Hugo & Congo 문서/

2.0 버전의 새로운 기능 ✨

목차
Congo 2.0은 새로운 기능과 최적화를 포함하고 있습니다.

Congo의 원래 목표는 간단하고 가볍은 테마를 개발하는 것이었습니다. Version 2는 이 한 단계 더 나아가 여전히 가볍고 강력한 테마를 만들어냅니다.

Tailwind CSS 3.0 #

Tailwind CSS는 Congo의 핵심이며, 이 새로운 릴리스는 최신 Tailwind CSS 버전 3을 포함합니다. 성능 최적화와 여러 가지 훌륭한 CSS 기능을 제공합니다.

이 새로운 버전을 구현하면서 테마에서 일부 Tailwind 플러그인 의존성을 제거했습니다. 이렇게 하면 전체 크기가 가볍게 유지됩니다.

다국어 지원 #

다국어 지원은 높은 요청이었습니다. Congo는 이제 다국어! 여러 언어로 콘텐츠를 게시하면 모든 번역을 사용하여 사이트가 빌드됩니다.

🇬🇧 🇩🇪 🇫🇷 🇪🇸 🇨🇳 🇧🇷 🇹🇷 🇧🇩

커뮤니티 기여로 인해 Congo는 이미 23개 언어로 번역되었습니다. 시간이 지남에 따라 더 많은 언어가 추가될 것입니다. 또한, 새로운 언어에 대한 pull request는 항상 환영합니다!

RTL 언어 지원 (오른쪽에서 왼쪽으로 쓰는 언어) #

새로운 Tailwind 및 다국어 기능의 이점 중 하나는 RTL 언어 지원을 추가할 수 있다는 것입니다. 활성화되면 전체 사이트가 오른쪽에서 왼쪽으로 내용을 재배치합니다. 테마의 모든 요소가 이 모드에서 잘 보이도록 재스타일링되었습니다. 이는 RTL 언어로 콘텐츠를 생성하고자 하는 작가에게 도움이 됩니다.

RTL은 언어별로 제어되므로 프로젝트에서 RTL과 LTR 콘텐츠를 혼합하고 매칭할 수 있습니다. 테마는 이 모드에서 모든 요소가 잘 보이도록 재스타일링되었습니다. 이는 RTL 언어로 콘텐츠를 생성하고자 하는 작가에게 도움이 됩니다.

자동 이미지 크기 조정 #

Congo 2.0의 큰 변화 중 하나는 자동 이미지 크기 조정의 추가입니다. Hugo Pipes의 힘을 사용하여 Markdown 콘텐츠의 이미지가 다양한 출력 크기에 맞게 자동으로 크기가 조정됩니다. 이렇게 하면 사이트 방문자에게 최적화된 파일 크기를 제공할 수 있습니다.

<!-- Markdown: ![My image](image.jpg) -->
<img
  srcset="
    /image_320x0_resize_q75_box.jpg 320w,
    /image_635x0_resize_q75_box.jpg 635w,
    /image_1024x0_resize_q75_box.jpg 1024w,
    /image_1270x0_resize_q75_box.jpg 2x"
  src="/image_635x0_resize_q75_box.jpg"
  alt="My image"
/>

가장 좋은 점은 아무것도 변경할 필요가 없다는 것입니다! 표준 Markdown 이미지 구문을 삽입하고 테마가 나머지를 처리하세요. 조금 더 제어하고 싶다면 figure 단축 코드가 완전히 새로 작성되어 동일한 크기 조정 이점을 제공합니다.

성능 향상 #

이 업데이트는 전체 테마에 성능 향상을 제공합니다. 이 릴리스의 주요 목표는 Lighthouse 점수를 향상시키는 것이었고, 이제 Congo는 모든 메트릭에서 완벽한 100점을 받습니다.

변경사항이 너무 많아 여기에 개별 변경 사항을 나열할 수는 없지만 결과는 그 자체로 의미가 있습니다. 더 깊이 파고들고 싶다면 Lighthouse 보고서를 확인하세요. 실제 성능은 서버 구성에 따라 다를 수 있습니다.

Fuse.js로 제공되는 사이트 검색을 통해 방문자는 빠르고 쉽게 콘텐츠를 찾을 수 있습니다. 모든 검색은 클라이언트 측에서 수행되므로 서버에서 구성할 필요가 없으며 쿼리는 매우 빠르게 수행됩니다. 기능을 활성화하면 사이트 구성에서 사용할 수 있습니다. 또한, 전체 키보드 탐색을 지원합니다!

목차 #

많은 요청이었던 기능인 목차를 지원합니다. 이 페이지 상단에서 직접 확인할 수 있습니다. 목차는 전체 반응형이며 다양한 화면 해상도에서 사용 가능한 공간을 활용하여 조정됩니다.

전역 또는 개별 문서 기준으로 목차를 사용할 수 있으며, 표준 Hugo 구성 값을 사용하여 동작을 사용자 정의할 수 있습니다.

접근성 향상 #

더 많은 항목에 ARIA 설명을 추가하거나 특정 텍스트 요소의 대비를 조정하는 등, 이 릴리스는 가장 접근성 있는 릴리스입니다.

Version 2는 “콘텐츠로 건너뛰기” 및 “맨 위로 스크롤” 링크를 추가하여 빠른 탐색을 활성화합니다. 또한, 마우스를 사용하지 않고 검색을 활성화하는 등 다양한 항목에 대한 키보드 단축키도 제공합니다.

새로운 이미지 크기 조정 기능은 alt 및 title 요소에 대한 전체 제어를 제공하여 모든 방문자에게 접근성 있는 경험을 제공합니다.

더 많은 변경 사항 #

여러 가지 다른 작은 변경 사항을 탐색할 수 있습니다.

문서 및 목록 페이지에서 태그를 표시할 수 있고, 글쓴이 매개변수에 새로운 headline를 사용하여 홈페이지를 사용자 정의할 수 있습니다.
SEO 성능을 최적화하기 위한 개선된 JSON-LD 구조화된 데이터도 있습니다.
또한 전체 테마에 일관된 디자인 언어를 보장하기 위해 추가적인 마크업도 있습니다.

🚀 더 많은 변경 사항을 확인하려면 full changelog를 확인하세요.

다음 단계 #

새로운 프로젝트를 시작하려면 설치 가이드를 확인하세요.

22 분